<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>用户中心</title>
    <style>
        h2 {
            margin-left: 2%;
        }
        
        li {
            list-style: none;
            margin-bottom: 15px;
        }
        
        .message {
            position: relative;
        }
        
        .basic_message {
            display: block;
        }
        
        .buyticket_message {
            width: 100%;
            /* background: pink; */
            position: absolute;
            top: 0px;
            display: none;
        }
        
        .esc a {
            display: block;
            text-decoration: none;
            color: #000;
            position: absolute;
            top: 25px;
            left: 21%;
        }
        
        .tab_control {
            margin-left: 2%;
        }
        
        .phone {
            border: none;
            background: none;
        }
        
        td {
            width: 257px;
            height: 105px;
            border-bottom: 1px dashed #b3b3b3;
        }
        
        .buyticket_message input {
            border: none;
        }
        
        .moive input {
            width: 17px;
        }
        
        .moive {
            width: 257px;
            height: 23px;
        }
        
        .moive form {
            float: left;
        }
        
        .moive label {
            float: left;
        }
    </style>
</head>

<body>
    <h2>欢迎回来,{$nickname}</h2>
    <div class="esc">
        <a href="{:url('user/esc','','')}">退出</a>
    </div>
    <div class="tab_control ">
        <button class="basic_message_btn">基本信息</button>
        <button class="buyticket_message_btn">购票信息</button>
    </div>
    <div class="message">
        <div class="basic_message">
            <ul>
                <form id="basic_message_form">
                    <li>
                        <label for="">手机号码</label>
                        <input type="text" name="" id="" value="{$phone}" readonly="readonly" class="phone">
                    </li>
                    <li>
                        <label for="">用户昵称</label>
                        <input type="text" name="nickname" id="" value="{$nickname}">
                    </li>
                    <li>
                        <label for="">登陆密码</label>
                        <input type="text" name="password" id="">
                    </li>
                    <li>
                        <label for="">重复密码</label>
                        <input type="text" name="password_2" id="">
                    </li>
                    <li>
                        <input type="submit" name="" id="submit" value="提交">
                    </li>
                </form>
            </ul>
        </div>
        <div class="buyticket_message">
            <table>
                {volist name="ticketArr" id="vo"} {volist name="vo" id="vr" offset="0" length='1'} {if condition="$vr['status']== '待打印'"}
                <tr>
                    <td>{$vr["movie_name"]}</td>
                    <td>
                        <div class="moive">
                            <label for=""> 影票详情: 
                                    {volist name="vo" id="va"}</label>
                            <span>{$va['row']}排</span>
                            <span>{$va['col']}座</span> {/volist}
                        </div>
                        <div class="">价格: {$vr["movie_price"]}</div>
                        <div>购买时间:{$vr["time_at"]|date="Y-m-d H:i:s",###}</div>

                        <div>订单状态:<a href="javascript:void(0)" id='{$vr["layout_id"]}_{$vr["time_at"]}_zt'>{$vr["status"]}</a></div>
                    </td>
                    <td id='{$vr["layout_id"]}_{$vr["time_at"]}_td'>
                        <a href="javascript:void(0);" id='{$vr["layout_id"]}_{$vr["time_at"]}' class="cb">出票</a>
                        <a href="javascript:void(0);" id='{$vr["layout_id"]}_{$vr["time_at"]}_qx' class="qx">取消</a>
                    </td>
                </tr>
                {else/}
                <tr>
                    <td>{$vr["movie_name"]}</td>
                    <td>
                        <div class="moive">
                            <label for=""> 影票详情: 
                                    {volist name="vo" id="va"}</label>
                            <span>{$va['row']}排</span>
                            <span>{$va['col']}座</span> {/volist}
                        </div>
                        <div class="">价格: {$vr["movie_price"]}</div>
                        <div>购买时间:{$vr["time_at"]|date="Y-m-d H:i:s",###}</div>

                        <div>订单状态:<a href="javascript:void(0)" id='{$vr["layout_id"]}_{$vr["time_at"]}_zt'>{$vr["status"]}</a></div>
                    </td>
                    <td id='{$vr["layout_id"]}_{$vr["time_at"]}_td'></td>
                </tr>
                {/if} {/volist} {/volist}

            </table>
        </div>
    </div>
    <script src="__STATIC__/js/jquery-3.4.1.js"></script>
    <script>
        $(function() {
            //为基本信息按钮绑定事件
            $('.basic_message_btn').on("click", function(e) {
                //禁止按钮按钮冒泡事件
                e.preventDefault();
                //显示基本信息
                $('.basic_message').css('display', 'block');
                //隐藏购票信息
                $('.buyticket_message').css('display', 'none');
            });
            //为购票信息按钮绑定事件
            $('.buyticket_message_btn').on("click", function(e) {
                //禁止按钮按钮冒泡事件
                e.preventDefault();
                //隐藏基本信息
                $('.basic_message').css('display', 'none');
                //显示购票信息
                $('.buyticket_message').css('display', 'block');
            });
            //为提交按钮绑定事件
            $('#submit').on("click", function(e) {
                //禁止冒泡事件
                e.preventDefault();
                //利用ajax传输数据
                $.ajax({
                    type: "POST",
                    url: "{:url('user/usercenter_do','','')}",
                    data: $('#basic_message_form').serialize(), //序列化数据
                    success: function(result) {
                        if (result.code == 1) {
                            alert(result.msg);
                            $(location).attr("href", "{:url('index/login','','')}");
                        } else {
                            alert(result.msg);
                        }
                    }
                })
            });
            //出票按钮
            $(".cb").on("click", function(e) {
                e.preventDefault();
                var ids = $(this).attr("id");
                if (confirm("确定要下载电影票吗？") == true) {
                    $.ajax({
                        type: "POST",
                        url: "{:url('user/buyticket','','')}",
                        data: {
                            ids: ids
                        },
                        success: function(result) {
                            if (result.code == 1) {
                                alert(result.msg);
                                $("#" + ids + "_zt").text("已完成");
                                $("#" + ids + "_td").html(" ");
                            } else {
                                alert(result.msg);
                            }
                        }
                    })
                }
            });
            //取消按钮
            $(".qx").on("click", function(e) {
                e.preventDefault();
                var ids = $(this).attr("id");
                if (confirm("确定取消定单吗？") == true) {
                    $.ajax({
                        type: "POST",
                        url: "{:url('user/buyticket_cancel','','')}",
                        data: {
                            ids: ids
                        },
                        success: function(result) {
                            if (result.code == 1) {
                                alert(result.msg);
                                var a = ids.split("_");
                                var id = a[0] + "_" + a[1];
                                $("#" + id + "_zt").text("已取消");
                                $("#" + id + "_td").html("");
                            } else {
                                alert(result.msg);
                            }
                        }
                    })
                }
            })
        });
    </script>
</body>

</html>